<!--
 @description 各分厂产量(套)
 @fileName FactoryBarChart.vue
 @author zengqiongying
 @created 2021/05/22 15:58:41
-->
<template>
  <div class="echart_container">
    <div v-show="selectType && selectDate" :id="chartId" ref="myEchart" class="echart_container" />

    <van-popup
      v-model="showDetail"
      round
      closeable
      :close-on-click-overlay="false"
      class="custom-van-pop"
    >
      <DlgCustomized v-if="showDetail" :detail-data="selectedData" @to-link="toCustomizedDetail" />
    </van-popup>
  </div>
</template>

<script>
import ChartBarMixin from '@/mixins/ChartBar'
import { getProducesFactoryQuantity } from '@/apis/produces'
import { parseTime } from '@/utils'
import DlgCustomized from './DlgCustomized'
export default {
  name: 'ProductFactoryBarChart',
  components: { DlgCustomized },
  mixins: [ChartBarMixin],
  props: {
    selectType: {
      type: String,
      default: ''
    }, // 工厂类型
    selectDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    } // 日期
  },
  data() {
    return {
      chartColors: [],
      showDetail: false,
      selectedData: '',
      dataList: []
    }
  },
  watch: {
    selectType(val, oldVal) {
      this.drawChart()
    },
    selectDate(val, oldVal) {
      this.drawChart()
    }
  },
  created() {
    const _this = this
    const xAxis = this.echartOption.xAxis
    xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
    xAxis.axisLabel.fontSize = 10 // 字体大小
    this.$set(this.echartOption, 'xAxis', xAxis)

    this.echartOption.tooltip.formatter = (params) => {
      let tipMsg = ''
      for (const i in params) {
        const item = params[i]
        tipMsg += `${item.name}：<span style="color:${item.color}">${_this.foramtThousand(Number(item.data).toFixed(2))}</span> <br>`
      }
      return `<div class="echart-tooltip-content">${tipMsg}</div>`
    }
  },
  methods: {
    async getChartData() {
      const xAxisData = []
      const seriesData = []
      const params = {
        factoryType: this.selectType,
        date: this.selectDate
      }
      await getProducesFactoryQuantity(params).then(res => {
        this.dataList = res.data || []
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            xAxisData.push(v.factoryName || '')
            seriesData.push(v.completedQuantity || 0)
          })
          // 最大数值设置为 黄色（#FEB81D），其他绿色(#12B9A3)
          const max = Math.max.apply(null, seriesData)
          this.chartColors = seriesData.map(v => {
            return Number(v || 0) === Number(max || 0) ? '#FEB81D' : '#12B9A3'
          })
          this.$set(this.echartOption, 'color', this.chartColors)
        }
      }).catch(err => {
        console.log(err)
      })
      this.chart.chartData = {
        xAxisData: xAxisData,
        seriesData: [seriesData]
      }
    },
    getxAxisSelectData(xIndex) {
      if (this.selectType === '定制') {
        this.selectedData = this.dataList[xIndex]
        this.showDetail = true
      }
    },
    toCustomizedDetail() {
      if (this.selectType === '定制') {
        this.$router.push({ name: 'customizedDetail', query: { date: this.selectDate }})
      }
    }
  }
}

</script>
<style lang='less' scoped>
  .echart_container{
    height:300px
  }
</style>
